<template>
	<view class="container">
		<view class="ysinfo_dl">
			<view class="ysinfo_dt">
				<image :src="row.avatar" mode="aspectFill"></image>
			</view>
			<view class="ysinfo_dd">
				<view class="ysinfo_name">{{row.name}}
				<!-- <text>{{row.jibie}}</text> -->
				</view>
				<view class="ysinfo_yy">{{row.yiyuan}}</view>
			</view>
		</view>
		<view class="yscontent">
			<view class="ysct_title"><text class="iconfont icon-fenggetedian"></text>面积</view>
			<view class="ysct_txt">{{row.area}}</view>
			<view class="ysct_title"><text class="iconfont icon-gongsijianjie"></text>简介</view>
			<view class="ysct_txt"><rich-text :nodes="row.content"></rich-text></view>
		</view>
		<view class="content pad30 mgt40">
			<view class="ctitle">请选择您想预约的时间段</view>
			<view class="timetis">日期可左右滑动，进行选择其他日期预约</view>
			<view class="time">
				<!--日期和周几-->
				<view class="tabhd">
					<scroll-view class="scroll-view" scroll-x="true" scroll-with-animation="true" id="scroll-view"
						:scroll-left="scrollLeft">
						<view class="scroll-item" :class="item.isSelected ? 'active':''"
							v-for="(item,index) in couponData" :key="item.id" @click="onCouponItemClick"
							:id="'item-'+item.id" :data-item="item.id" :data-date="item.date">
							<view class="item-text">{{item.name}}<text>{{item.day}}</text></view>
						</view>
					</scroll-view>
				</view>
				<view class="time_bd">
					<block v-for="(item,index) in times" :key="index">
						<view class="time_dl no" v-if="item.num<=item.yiyue">
							<view class="time_dt">{{item.time}}</view>
							<view class="time_dd">已约满</view>
						</view>
						<view class="time_dl yes" v-else-if="item.check==1" :data-index="index" @click="qiehuan">
							<view class="time_dt">{{item.time}}</view>
							<!-- <view class="time_dd">余{{item.num-item.yiyue}}个</view> -->
						</view>
						<view class="time_dl" v-else :data-index="index" @click="qiehuan">
							<view class="time_dt">{{item.time}}</view>
							<!-- <view class="time_dd">余{{item.num-item.yiyue}}个</view> -->
						</view>
					</block>

				</view>
			</view>
		</view>
		<!-- <view class="content pad30 mgt40">
			<view class="ctitlebox">
				<view class="ctitle">热门项目</view>
				<view class="imore" @tap="xmbtn()">查看更多<text></text></view>
			</view>
			<view class="goods">
				<view class="goods_li" v-for="(item,index) in remen" :key="item.id">
					<navigator :url="'/pages/goodsdetail/goodsdetail?id='+item.id" hover-class="none">
						<view class="goods_img">
							<image :src="item.image" mode="aspectFill"></image>
						</view>
						<view class="goods_title">{{item.name}}</view>
						<view class="goods_price">￥{{item.price}}</view>
					</navigator>
				</view>


			</view>
		</view> -->

		<view class="bottombox">
			<view class="botlink" @tap="homebtn()">
				<view class="iconfont icon-shouye"></view><text>首页</text>
			</view>
			<view class="botbtn" @tap="yuyuebtn()">立即预约</view>
			<!-- <view class="botbtn zxbtn" @click="callme"><button></button>电话咨询</view> -->
		</view>
	</view>
</template>

<script>
	import API from "@/common/api.js";
	export default {
		data() {
			return {
				row: [],
				remen: [],
				zhuanfa: [],
				times: [],
				couponData: [],
				scrollLeft: 0,
			}
		},
		onLoad(options) {
			var shopid = uni.getStorageSync("shopid");
			var $this = this
			API.post("doctor/doctorDetail", {
				id: options.id,
				isshop: API.isshop,
				shopid: shopid

			}).then((res) => {
				if (res.code == 1) {
					$this.row = res.data
					$this.couponData = res.data.paiban
					$this.times = res.data.times
					//$this.getScrollW();
				}
			})
			API.post("product/remen", {
				id: options.id,
				isshop: API.isshop,
				shopid: shopid
			}).then((res) => {
				if (res.code == 1) {
					$this.remen = res.data
				}
			})
			API.post("common/zhuanfa").then((res) => {
				if (res.code == 1) {
					$this.zhuanfa = res.data
				}
			})
		},
		methods: {
			qiehuan(e) {
				var index = e.currentTarget.dataset.index;
				var times = this.times
				for (var i = 0; i < times.length; i++) {
					if (index == i) {
						times[i].check = 1;
					} else {
						times[i].check = 0;
					}
				}
				this.times = times
			},
			xmbtn() {
				uni.navigateTo({
					url: '/pages/sort/sort'
				})
			},
			callme() {
				uni.makePhoneCall({
					phoneNumber: this.zhuanfa.kefu
				});
			},
			/**
			 * 动态改变scroll-left的值
			 * */
			_handleScroll(selectedId) {
				var _this = this;
				var query = uni.createSelectorQuery(); //创建节点查询器
				console.log(query)
				query.select('#item-' + selectedId).boundingClientRect(); //选择id='#item-' + selectedId的节点，获取节点位置信息的查询请求
				query.select('#scroll-view').boundingClientRect(); //获取滑块的位置信息
				//获取滚动位置
				query.select('#scroll-view').scrollOffset(); //获取页面滑动位置的查询请求
				query.exec(function(res) {
					// console.log("res:",res)
					//console.log(res)
					_this.scrollLeft = res[2].scrollLeft + res[0].left + res[0].width / 2 - res[1].width / 2
				});
			},
			onCouponItemClick: function(e) {
				//console.log(e)
				var id = e.currentTarget.dataset.item;
				var date = e.currentTarget.dataset.date;
				var shopid = uni.getStorageSync("shopid");
				//console.log(id)
				var curIndex = 0;
				for (var i = 0; i < this.couponData.length; i++) {
					if (id == this.couponData[i].id) {
						this.couponData[i].isSelected = true;
						curIndex = i;
					} else {
						this.couponData[i].isSelected = false;
					}
				}
				this._handleScroll(id);
				var $this = this
				API.post("doctor/gettimes", {
					id: this.row.id,
					date: date,
					isshop: API.isshop,
					shopid: shopid
				}).then((res) => {
					if (res.code == 1) {
						$this.times = res.data
					}
				})
			},
			/*qiyekefu(e) {

				var $this = this
				API.showModal($this.row.kefu)
				uni.openCustomerServiceChat({
					extInfo: {
						url: $this.row.kefu
					},
					corpId: "ww523fe3ce7827045f",
					success(res) {
						API.showModal("success")
						console.log(res)
					},
					fail(res) {
						API.showModal(res)
						console.log(res)
					}
				})
			},*/
			homebtn() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			yuyuebtn() {
				var $this = this
				API.post("user/getUser").then((res) => {
					if (res.data.islogin == 1) {
						if ($this.row.ispb == 1) {
							var date = "",
								times = "";
							for (var i = 0; i < $this.couponData.length; i++) {
								if ($this.couponData[i].isSelected == 1) {
									date = $this.couponData[i].date
								}
							}
							for (var i = 0; i < $this.times.length; i++) {
								if ($this.times[i].check == 1) {
									times = $this.times[i].time
								}
							}
							if (!times) {
								API.showToast("请选择预约时间段")
							} else {
								uni.navigateTo({
									url: "/pages/yuyue/yuyue?id=" + $this.row.id + "&name=" + $this.row
										.name + "&shopid=" + $this.row.shopid + "&date=" + date +
										"&times=" + times
								})
							}
							console.log(date + times)
						} else {
							uni.navigateTo({
								url: "/pages/yuyue/yuyue?id=" + $this.row.id + "&name=" + $this.row.name +
									"&shopid=" + $this.row.shopid +
									"&date=&times="
							})
						}

					} else {
						API.showModal("请先登录", "/pages/user/login/login")
					}
				})
			},

		}
	}
</script>

<style lang="scss">
	@import '@/static/style.css';

	.container {
		padding-bottom: 140rpx;
	}

	.container::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 480rpx;
		background: linear-gradient(to bottom, #b0ccff, #fff);
	}

	.ysinfo_dl {
		padding: 50rpx 40rpx;
		position: relative;
		z-index: 1;
		display: flex;
		overflow: hidden;
	}

	.ysinfo_dt {
		width: 130rpx;
		height: 130rpx;
		border-radius: 130rpx;
		overflow: hidden;
		margin-right: 30rpx;
	}

	.ysinfo_dt image {
		width: 100%;
		height: 100%;
		border-radius: 130rpx;
	}

	.ysinfo_dd {
		flex: 1;
	}

	.ysinfo_name {
		font-size: 40rpx;
		font-weight: bold;
		margin-top: 10rpx;
	}

	.ysinfo_name text {
		font-size: 26rpx;
		color: #666;
		margin-left: 20rpx;
	}

	.ysinfo_yy {
		margin-top: 16rpx;
		font-size: 26rpx;
		color: #555;
	}

	.yscontent {
		position: relative;
		z-index: 1;
		margin-top: -40rpx;
		border-radius: 40rpx 40rpx 0 0;
		padding: 10rpx 30rpx;
		overflow: hidden;
	}

	.ysct_title {
		padding-top: 40rpx;
		font-size: 32rpx;
		font-weight: bold;
		overflow: hidden;
	}

	.ysct_title text {
		margin-right: 20rpx;
		font-size: 32rpx;
	}

	.icon-fenggetedian {
		color: #f47f00;
	}

	.icon-gongsijianjie {
		color: #357dff;
	}

	.ysct_txt {
		font-size: 26rpx;
		margin-top: 20rpx;
		line-height: 48rpx;
		color: #555;
	}

	.bottombox {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		box-shadow: 0px 0 30rpx 0px rgba(0, 0, 0, 0.06);
		background: #fff;
		display: flex;
		padding: 20rpx;
	}

	.botlink {
		width: 140rpx;
		text-align: center;
		line-height: 44rpx;
	}

	.botlink text {
		display: block;
		font-size: 28rpx;
	}

	.botlink .iconfont {
		font-size: 44rpx;
	}

	.botbtn {
		flex: 1;
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 90rpx;
		background: $color;
		text-align: center;
		margin: 0 16rpx;
		border-radius: 10rpx;
	}

	.botbtn.zxbtn {
		background: #4dd1a2;
	}


	.timetis {
		color: #999;
		font-size: 26rpx;
		width: 100%;
		overflow: hidden;
		padding: 10rpx 0 0 20rpx;
	}

	.time {
		border-radius: 10rpx;
		background: #fff;
		overflow: hidden;
		margin-top: 20rpx;
		border: 2rpx #e2ecff solid;
	}

	.tabhd {
		background: #e2ecff;
		overflow: hidden;
		padding: 14rpx 10rpx 0;
	}

	.scroll-view {
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
	}

	.scroll-item {
		display: inline-block;
		padding: 10rpx 20rpx;
		text-align: center;
		margin: 0 4rpx;
		line-height: 36rpx;
		color: #5773a3;
		font-size: 26rpx;
	}

	.item-text text {
		color: #234781;
		display: block;
		overflow: hidden;
	}

	.scroll-item.active {
		background: #fff;
		border-radius: 10rpx 10rpx 0 0;
	}

	.scroll-item.active text {
		color: $color;
		font-weight: bold;
	}

	.time_bd {
		width: 100%;
		display: flex;
		overflow: hidden;
		flex-wrap: wrap;
		padding: 30rpx 1.5% 6rpx;
		box-sizing: border-box;
	}

	.time_dl {
		width: 30.33%;
		margin: 0 1.5% 24rpx;
		background: #f3f4f6;
		border-radius: 10rpx;
		box-sizing: border-box;
		text-align: center;
		padding: 20rpx 0;
	}

	.time_dt {
		font-weight: bold;
		font-size: 28rpx;
	}

	.time_dd {
		color: $color;
		margin-top: 10rpx;
	}

	.time_dl.yes {
		background: $color;
		color: #fff;
	}

	.time_dl.yes .time_dd {
		color: #fff;
	}

	.time_dl.no,
	.time_dl.no .time_dd {
		color: #D6D6D6;
	}
</style>